<template>
  <div class="tab">
    <router-link tag="div" class="tab-item" to="/index">
      <i class="icon-font icon-Category">&#xe604;</i> 
      <span class="tab-link">首页</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/classify">
      <i class="icon-font icon-Category">&#xe699;</i> 
      <span class="tab-link">分类</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/cart">
      <i class="icon-font icon-cart">&#xe647;</i> 
      <span class="tab-link">购物车
      </span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/user">
      <i class="icon-font icon-account">&#xe6b8;</i> 
      <span class="tab-link">我的</span>
    </router-link>
  </div>
</template>
<script type="text/ecmascript-6">
	
</script>
<style scoped lang='scss' type="text/css">
  @import "~common/scss/variable.scss";
    .tab{
        display: flex;
        height: 64px;
        background: $color-highlight-background;
        font-size: $font-size-medium; 
        border-top:1px solid $color-border;
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 50%;
        -webkit-transform: translate3d(-50%,0,0);
        -ms-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0); 
        .tab-item{
              flex: 1;
              text-align: center;
              padding-top: 16px;
              .icon-font{
                display: inline-block;
                width:100%;
                font-size: 22px;
                line-height: 22px;
              }                
              .tab-link{
                color: $color-text-l;
                display: inline-block; 
                line-height: 22px;               
              }
              &.router-link-active{
                  .tab-link{
                      color: $color-sub-theme;
                  }
                  .icon-font{
                    color:$color-sub-theme;
                  }                
              }            
        }    
    }
</style>